window.addEventListener('load', function(){
	var loginButtonIsActive = false;
	var loginButton = document.getElementById('loginButton');
	var loginBox = document.getElementById('loginBox');
	loginButton.addEventListener('click', loginButtonToggle, false);

	function loginButtonToggle(e){
		if(loginButtonIsActive){
			loginButtonOff();
		}else{
			miniNavigationOff();
			loginButtonOn();
		}
	}
	function loginButtonOn(){
		loginButton.style.backgroundColor = 'darkred';
		loginBox.style.display = 'inline-block';
		loginBox.style.top = (loginButton.offsetTop + (loginButton.offsetHeight) - 5) + 'px';
		loginBox.style.left = (loginButton.offsetLeft - (loginBox.offsetWidth - loginButton.offsetWidth)) + 'px';
		loginButtonIsActive = true;
	}
	function loginButtonOff(){
		loginButton.style.backgroundColor = '#FF5050';
		loginBox.style.display = 'none';
		loginButtonIsActive = false;
	}

	var miniNavigationIsActive = false;
	var miniNavigation = document.getElementById('mini-navigation');
	var miniNavigationPanel = document.getElementById('mini-navigation-panel');
	miniNavigation.addEventListener('click', miniNavigationToggle, false);

	function miniNavigationToggle(e){
		if(miniNavigationIsActive){
			miniNavigationOff();
		}else{
			loginButtonOff();
			miniNavigationOn();
		}
	}
	function miniNavigationOn(){
		miniNavigation.style.backgroundColor = 'darkred';
		miniNavigationPanel.style.display = 'inline-block';
		miniNavigationPanel.style.top = (miniNavigation.offsetTop + miniNavigation.offsetHeight - 5) + 'px';
		miniNavigationPanel.style.left = miniNavigation.offsetLeft + 'px';
		miniNavigationIsActive = true;
	}
	function miniNavigationOff(){
		miniNavigation.style.backgroundColor = '#FF5050';
		miniNavigationPanel.style.display = 'none';
		miniNavigationIsActive = false;
	}
}, false);

